	<template>
	<div id="tios">
		<div class="tit" :style="{borderColor:lives.labelColor}">我要评论</div>
		<div class="footer">
			<Input id="messageText" :rows="9" @keyup.enter="sendMsg" :placeholder="upplaceholder" type="textarea" v-model="msg"></Input>
			<Poptip placement="bottom-start" width="300" style="position: absolute;bottom: 5px;left: 10px;z-index:40000;" v-model="visible">
				<div class="face"><img src="../../../static/img/face.png" alt="">表情</div>
				<div class="api" slot="content">
					<emotion @emotion="handleEmotion"></emotion>
				</div>
			</Poptip>
			<Button id="btn" @click="sendMsg" :style="{background:lives.labelColor}">发送</Button>
		</div>

		<div class="tit" :style="{borderColor:lives.labelColor}">全部评论</div>
		<ul class="tio-content">
			<li v-for="(item, i) in chatList" :key="i">
				<img :src="defaultCover" alt="">
				<div class="tio-chat">
					<div>
						<label>{{item.user.name}}</label>
						<span>{{item.content.time | filterDate}}</span>
					</div>
					<p v-html="item.content.chatContent.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, emotion)"></p>
				</div>
			</li>
		</ul>
		
		<div style="margin: auto;">
			<Page :total="totalCount" show-total @on-change="pageChange" />
		</div>
	</div>
</template>

<script>
	import Emotion from '@/components/Emotion/emotionIndex'
	export default {
		data() {
			return {
				currentPage: 1,
				totalCount:0,
				defaultCover: require("../../../static/img/defaultHead.png"),
				msg: "",
				chatList: [],
				content: '',
				comment: '',
				visible: false,
			};
		},
		components: {
			Emotion
		},
		computed: {
			lives() {
				return this.$store.state.liveInfo
			},
			absoluteFixed() {
				return this.$store.state.absoluteFixed
			},
			upplaceholder() {
				var placeholder = "说点什么吧...";
				return placeholder;
			},
			upChat() {
				var chat = "";
				if (this.$store.state.liveInfo.chatSettings == 1) {
					chat = true;
				} else if (this.$store.state.liveInfo.chatSettings == 0) {
					chat = false;
				}
				return chat;
			},
		},
		created() {
			setTimeout(() => {
				this.getChatList()
			}, 500)
		},
		filters: {
			filterDate(t) {
				if (t) {
					let myDate = new Date(); //获取当前时间
					let nowTime = myDate.getTime(); //当前时间戳
					let nowyear = myDate.getFullYear(); //当前年份
					nowTime = parseInt(nowTime / 1000); //当前秒数
					let today = myDate.getDate();
					let data = t;
					let year = data.substring(0, 4); //发表评论的年份
					let hm = data.substring(11, 16); //发表评论的时和分
					let md = data.substring(5, 10); //发表评论的月和日
					let otoday = data.substring(8, 10);
					let timestamp = parseInt(new Date(data).getTime()); //发表评论的时间戳
					timestamp = timestamp / 1000; //发表评论的时间秒数
					let timecha = nowTime - timestamp; //时间差
					let yearcha = nowyear - year; //年份差
					let todaycha = today - otoday;
					let showtime = "";
					if (yearcha < 1) {
						if (todaycha == 0) {
							showtime = hm;
						} else {
							showtime = md + " " + hm;
						}
					} else {
						showtime = data;
					}
					return showtime;
				}
			},
		},
		methods: {
			pageChange(e){
				this.currentPage=e
				this.getChatList()
			},
			handleEmotion(i) {
				console.log('i++',i);
				this.msg += i
				this.visible = false;
			},
			emotion(res) {
                console.log('res',res);
				let word = res.replace(/\#|\;/gi, '')
				const list = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷',
					'冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰',
					'骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜',
					'菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫',
					'便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳',
					'发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极'
				]
				let index = list.indexOf(word)
				return `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif" align="middle">`
			},
			/*获取时间*/
			sendMsgTime() {
				function getNow(s) {
					return s < 10 ? "0" + s : s;
				}
				var myDate = new Date();
				//获取当前年
				var year = myDate.getFullYear();
				//获取当前月
				var month = myDate.getMonth() + 1;
				//获取当前日
				var date = myDate.getDate();
				var h = myDate.getHours(); //获取当前小时数(0-23)
				var m = myDate.getMinutes(); //获取当前分钟数(0-59)
				var s = myDate.getSeconds();
				var now =
					year +
					"-" +
					getNow(month) +
					"-" +
					getNow(date) +
					" " +
					getNow(h) +
					":" +
					getNow(m) +
					":" +
					getNow(s);
				return now;
			},
			sendMsg() {
				var Cid = null;
				var Cindex = 0;
				var Ctype = 0;
				let dataObj = {
					roomId: this.$route.params.id,
					id: Cid,
					index: Cindex,
					type: Ctype,
					content: {
						chatContent: this.msg,
						type: 0,
						status: 0, //0已审核，1未审核
						time: this.sendMsgTime()
					},
					replys: [],
					extra: "",
					user: {
						id: localStorage.getItem("youkeId"),
						name: localStorage.getItem("youkeName"),
						portrait: ''
					}
				};
				this.$http
					.post(this.$api.replySensorKeyWord(), dataObj, {
						header: {
							"Content-Type": "application/json;charset=UTF-8"
						}
					})
					.then(res => {
						this.msg = ""
						this.getChatList()
					});
			},
			getChatList() {
				let self = this;
				this.$http
					.get(this.$api.getInteractiveChatHistoryByPage(), {
						params: {
							type: 1, //1互动聊天，2聊天管控
							roomId: this.$route.params.id,
							page:this.currentPage,
							limit:5,
						}
					})
					.then(res => {
						this.chatList = res.data.list.list
						this.totalCount=res.data.list.totalCount
						this.$nextTick(function() {
							let div = document.getElementsByClassName("tio-content")[0]
							div.scrollTop = div.scrollHeight;
						})
					});
			},
		}
	};
</script>

<style lang="less" rel=stylesheet/less scoped="scoped">
	#tios {
		width: 100%;
		height: 100%;
		position: relative;
		text-align: left;

		.tit {
			font-weight: bold;
			margin: 20px 0;
			font-size: 17px;
			border-left: 4px solid;
			padding-left: 10px;
		}

		.footer {
			position: relative;

			#messageText {
				width: 100%;
				border: 0;
			}

			.face {
				width:100px;
				display: flex;
				align-items: center;
				cursor: pointer;
				img {
					margin-right: 5px;
					width: 25px;
				}
			}

			#btn {
				position: absolute;
				right: 10px;
				bottom: 10px;
				width: 80px;
				color: #fff;
				cursor: pointer;
				text-align: center;
			}
		}
	}

	#user_face_icon {
		width: 35px;
		height: 35px;

		img {
			border-radius: 30px;
			width: 35px;
			height: 35px;
		}
	}

	.imgleft {
		width: 40px;
		height: 40px;
		border-radius: 40px;
	}

	.tio-content {
		font-size: 14px;
		width: 100%;
		padding-bottom: 10px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		/*解决ios滚动不流畅*/
		overflow-x: hidden;
		word-break: break-all;
		word-wrap: break-word;

		li {
			padding: 10px;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #ccc;

			.tio-chat {
				width: calc(100% - 45px);
				text-align: left;
				// background: #fafafa;
				padding: 5px 0 5px 10px;
				// border-radius: 10px;
				float: left;
				// margin: 0 10px 0 10px;
				// border: 1px solid #ccc;
				// box-shadow: 0 0 3px #ccc;

				div {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				p {
					color: #666;
				}
			}

			img {
				width: 35px;
				height: 35px;
			}

			span {
				color: #999;
				font-size: 12px;
			}
		}
	}
</style>
